<template>
  <div id="dayProduce">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <dv-decoration-8 style="width:25%;height:40px;" />
        <span class="fs-xl text mx-2" style="width:50%;height:40px;font-size:30px;display: inline-block;line-height: 40px;text-align: center">原片小时产量</span>
        <dv-decoration-8 :reverse="true" style="width:25%;height:40px;" />
      </div>
      <div style="margin-top: 10px">
        <dv-scroll-board :config="config" style="width:580px;height:330px" />
      </div>
    </div>
  </div>
</template>

<script>
import { linesHoursStatic } from '@/api/yield'
import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'
dayjs.extend(customParseFormat)

export default {
  data() {
    return {
      timing2: null,
      config: {},
      queryParams: {
      },
      currentFinalData: {}
    }
  },
  computed: {},
  watch: {
    currentFinalData: {
      handler(newdata) {
        this.config = {
          // 表头背景色 '#00BAFF''#003B51''#0A2732'
          headerBGC: '#00BAFF75',
          oddRowBGC: '#003B5145',
          evenRowBGC: '#0A273245',
          header: ['线-时间', '良品面积', '良品率', '引出量T/H'],
          columnWidth: [150, 150, 150],
          align: ['center', 'center', 'center', 'center'],
          // 轮播方式 'single'|'page'
          carousel: 'page',
          // 轮播时间间隔 2000
          waitTime: 4000,
          data: newdata
        }
      },
      immediate: true
      // deep: true
    }
  },
  mounted() {
    this.getYieldCalTable()
    this.timeFn2() // todo base
  },
  beforeDestroy() {
    clearInterval(this.timing2)
  },
  methods: {
    // 五行 过去5小时 五线轮播 4-5栏
    getYieldCalTable() {
      const queryStaticsParams = {}
      let line24Statics = []
      const currentTime = new Date()
      // let line24Statics = ['20250521221237', '20250522111237']
      const yieldSort = 'DESC'
      line24Statics = ['20250520150000', '20250520160000'] // 测试时间 todo 生产端需注释
      line24Statics[0] = dayjs(currentTime).subtract(5, 'hour').format('YYYYMMDDHHmmss') // 实际时间
      line24Statics[1] = dayjs(currentTime).format('YYYYMMDDHHmmss') // 实际时间
      this.currentFinalData = []
      linesHoursStatic(this.addParam((this.addDateRange(queryStaticsParams, [line24Statics[0], line24Statics[1]])), 'sort', yieldSort)).then(response => {
        this.currentFinalData = response.data.reduce(function(acc, cur) {
          // let arr = ['1线-time', 'yieldSquare', Number(('yieldSquare/(pullingSquare + edgeCleanSquare)') * 100 - 2).toFixed(2) + '%', 'pullingOutput']
          const arr = []
          // '1线-time'
          arr.push(cur.line + '线 ' + cur.timeStart.substr(5, 8) + '时')
          // 'yieldSquare'
          arr.push(Number(cur.yieldSquare.toFixed(0)))
          // 'yieldSquare/(pullingSquare + edgeCleanSquare)'
          // arr.push(Number((cur.yieldSquare / (cur.pullingSquare + cur.edgeCleanSquare)) * 100 - 2).toFixed(2) + '%')
          arr.push(Number((cur.yieldSquare / cur.pullingSquare) * 100 - 2).toFixed(2) + '%')
          // 'pullingOutput'
          arr.push(Number(cur.pullingOutput.toFixed(0)))
          acc.push(arr)
          return acc
        }, [])
      })
    },
    timeFn2() {
      this.timing2 = setInterval(() => {
        console.log('小时报 left 实时2', dayjs(new Date()).format('YYYYMMDDHHmmss'))
        this.getYieldCalTable()
      }, 120000)
    }
  }
}
</script>

<style lang="scss" scoped>
  $box-height: 435px;
  $box-width: 100%;
  #dayProduce {
    padding: 20px 16px 20px 16px;
    height: $box-height;
    width: $box-width;
    border-radius: 5px;

    .bg-color-black {
      padding: 5px;
      height: $box-height - 35px;
      width: $box-width;
      border-radius: 10px;
    }

    .text {
      color: #c3cbde;
    }

    .chart-box {
      margin-top: 16px;
      width: 170px;
      height: 170px;

      .active-ring-name {
        padding-top: 10px;
      }
    }
  }
</style>
